<template>
  <view class="container">
    <js-error mode="bottom" ref="jsError"></js-error>
    <!-- <view class="search">
			<u-search @click="show = true" :show-action="false" placeholder="搜索" :disabled="true"></u-search>
		</view> -->
    <!-- <scroll-view  style="height: 100vh;" scroll-y="true"  :refresher-enabled="true"
			:refresher-triggered="triggered" @refresherrefresh="refresherrefresh" > -->
    <!-- <u-navbar
      back-text="返回"
      title="消息列表"
      :background="backgroundColor"
      title-color="#fff"
      back-icon-color="#fff"
      :back-text-style="backTextStyle"
    >
    </u-navbar> -->
    <!-- FAFAFA -->
    <u-sticky class="u-sticky">
      <u-tabs
        :list="isReadList"
        :is-scroll="false"
        :current="current"
        @change="change"
        active-color="#aaaaaa"
        font-size="26"
        inactive-color="#666666"
        bg-color="rgba(62, 151, 176,0.1)"
        :active-item-style="activeItemStyle"
      ></u-tabs>
    </u-sticky>
    <scroll-view
      :style="{ height: scrollViewHeight + 'px' }"
      scroll-y="true"
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      :scrolltolower-enabled="true"
      :refresher-triggered="triggered"
      @refresherrefresh="refresherrefresh"
    >
      <view
        class=""
        style="
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        "
        :style="{ height: scrollViewHeight + 'px' }"
      >
        <view
          class="list flex-column"
          v-if="list.length"
          v-for="(item, index) in list"
          :key="item.id"
          @click="contentClick(item.msgContentEntity.content, item)"
        >
          
          <view
            class="content"
            @longpress="handleLongPress(item)"
            :style="{
              background: item.isReadBlockVisible ? '#f5f5f5' : '#fff',
            }"
            bindlongpress="handleLongPress"
            :data-item="item"
          >
            <view class="content-type">
              <view class="content-type-type-icon">
                <view class="content-type-icon">
                <image
                  class="content-type-icon-img"
                  :src="'/static/image/notice/' + img + '.png'"
                  mode="aspectFit"
              /></view>
              <view class="content-type-title">{{ dictName }}</view>
              </view>
              <view class="dddate"> {{ item.pushDate || '' }} </view>
            </view>
            <view class="content-content">
              <view class="content-title">{{ item.msgTitle }}</view>
              <view style="line-height: 52rpx; font-size: 26rpx">
                <div v-html="item.msgContentEntity.content"></div
              ></view>
            </view>
            <view class="content-footer">
              <view class="content-footer-left"></view>
			  <view >查看详情<u-icon name="arrow-right"></u-icon></view>
            </view>
          </view>
          <view
            class="read-block"
            v-if="item.isReadBlockVisible&&current == 0"
            @click="readAll(item)"
            >已读</view
          >
        </view>
        <view
          v-if="list.length"
          class="loadmore"
          style="justify-self: flex-end"
        >
          <u-loadmore :status="loadStatus"></u-loadmore>
        </view>
        <u-empty v-if="!list.length" style="height: 100%;"></u-empty>
        
      </view>
    </scroll-view>
    <view class="btn-group cu-bar foot" style="height: 80px"  v-if="current==0">
          <button class="cu-btn  shadow-blur" @click="readAllMsg">
              <text class="cuIcon-commentfill" style="margin-right: 10px;"> </text> 全部已读
          </button>
      </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeItemStyle: {
        backgroundColor: "#FAFAFA",
        color: "#333",
      },
      backgroundColor: {
        backgroundColor: "#3E97B0",
      },
      backTextStyle: {
        color: "#fff",
      },
      triggered: false,
      show: false,
      smshow: false,
      focus: true,
      barCode: "",
      list: [],
      options: [
        {
          text: "已读",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
      isReadList: [
        {
          name: "未读",
        },
        {
          name: "已读",
        },
      ],
      query: {
        pageNo: 1,
        pageSize: 20,
        // orderBy: "a.create_date desc",
      },
      current: 0,
      loadStatus: "loadmore",
      showCheckbox: false,
      dictName: "",
      img: "",
      scrollViewHeight: 0,
      headerHeight: 0,
    };
  },

  onLoad(e) {
    console.log(e);
    if (e.params) {
      e.params = JSON.parse(e.params);
      console.log(e.params);
      this.bizType = e.params.bizType;
      this.dictName = e.params.dictName;
      this.img = e.params.img;
      this.query.bizType = e.params.bizType;
      // this.loadData();
    }
    if (e.current) {
      this.current = e.current;
      console.log(this.current);
    }
    this.current ? (this.query.pushed = true) : (this.query.pushed = false);
    console.log(this.query);
  },
  created() {
    uni.showTabBar();
  },
  mounted() {
    this.calculateScrollViewHeight();
  },
  onShow() {
    // this.query.pageNo = 1;
    this.loadData();
  },
  methods: {
    async calculateScrollViewHeight() {
      const query = uni.createSelectorQuery().in(this);

      // 计算u-sticky头部高度
      query
        .select(".u-sticky")
        .boundingClientRect((rect) => {
          this.headerHeight = rect.height;
          console.log(this.headerHeight, "headerHeight-u-sticky");
        })
        .exec((results) => {
          // 确保所有查询完成后再进行后续计算
          if (results && results.length) {
            console.log(this.headerHeight, "headerHeight");
            // 计算tabbar高度，假设tabbar是一个固定的高，或者同样方式动态获取
            if(this.current == 0){
              this.tabBarHeight = 90;
            }else{
              this.tabBarHeight = 0; // 假设tabbar高度为50px，实际应根据实际情况获取
            }

            // 获取屏幕高度
            const systemInfo = uni.getSystemInfoSync();
            const screenHeight = systemInfo.windowHeight;

            // 计算scroll-view高度
            this.scrollViewHeight =
              screenHeight - (this.headerHeight + this.tabBarHeight);
          }
        });
    },

    handleLongPress(item) {
      item.isReadBlockVisible = !item.isReadBlockVisible;
    },
    readAll(item) {
      item.isReadBlockVisible = !item.isReadBlockVisible;
      this.$u.api.zfgs
        .readMsg({
          id: item.id,
        })
        .then((res) => {
          if (!res.pushed) {
            this.$u.toast("标记成功");
            this.loadData();
          } else {
            this.$u.toast("标记失败");
          }
        });
    },
    handleBatchRead() {
      console.log(this.list);
    },
    contentClick(content, item) {
      if (!!content) {
        
        if(this.current == 0){
          this.readAll(item);
        }
        uni.setStorageSync('tempContent', content);
        uni.setStorageSync('tempItem', item);
        uni.navigateTo({
          url:
            "/pages/zfgs/index/notice/details?content=" +
            JSON.stringify(content),
        });
      }
    },
    change(index) {
      this.current = index;
      this.current ? (this.query.pushed = true) : (this.query.pushed = false);
      this.query.pageNo = 1;
      this.calculateScrollViewHeight();
      this.loadData();
    },
    click(index, index1) {
      this.list[index].show = false;
      this.$u.toast(`收藏成功`);
    },
    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      this.list[index].show = true;
      this.list.map((val, idx) => {
        if (index != idx) this.list[idx].show = false;
      });
    },

    reset() {
      this.query = {
        pageNo: 1,
        pageSize: 20,
      };
      this.loadData();
    },
    loadMore() {
      this.loadStatus = "loading";
      setTimeout(() => {
        this.query.pageNo += 1;
        this.loadData("add");
      }, 100);
    },
    async refresherrefresh() {
      this.triggered = true;
      this.query.pageNo = 1;
      await this.loadData();
      setTimeout(() => {
        this.triggered = false;
      }, 500);
      // this.triggered = false;
    },
    loadData(type) {
      this.$u.api.zfgs.msgPushAppListData(this.query).then((res) => {
        console.log(res);
        this.show = false;
        if (res.list.length < 20 || res.list.length == 0) {
          this.loadStatus = "nomore";
        }
        var data = res.list;
        // 添加isReadBlockVisible 属性
        data.forEach((item) => {
          item.isReadBlockVisible = false;
        });

        if (type == "add") {
          for (var i = 0; i < data.length; i++) {
            this.list.push(data[i]);
          }
        } else {
          this.list = data;
        }
      });
    },
    submit() {
      setTimeout(() => {
        this.query.pageNo = 1;
        this.loadData();
      }, 100);
    },
    readAllMsg(){
      this.$u.api.zfgs.readAllMsg({
        bizType : this.bizType
      }).then((res) => {
        if (res.result == "true") {
          this.$u.toast(res.message);
          this.loadData();
        } else {
          this.$u.toast(res.message);
        }
      });
    }
  },
};
</script>

<style lang="scss">
.batch-read {
  margin-right: 20rpx;
  color: #fff;
}
.dddate {
  text-align: center;
}
.content {
  display: flex;
  background: #fff;
  margin: auto 30rpx;
  border-radius: 20rpx;
  flex-direction: column;
}
.content-type {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  border-bottom: 2rpx solid #f1f0f0;
  width: 100%;
  justify-content: space-between;
}
.content-type-type-icon{
  display: flex;
}
.content-type-icon {
  display: flex;
  align-items: center;
}
.content-type-icon-img {
  width: 46rpx;
  height: 46rpx;
  margin-right: 10rpx;
}
.content-type-title {
  color: #000;
  font-weight: bold;
}
.content-content {
  padding: 20rpx 30rpx;
}
.content-title {
  margin: 20rpx 0;
  font-weight: bold;
  font-size: 36rpx;
}
.content-footer {
  display: flex;
  justify-content: space-between;
  border-top: 2rpx solid #f1f0f0;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
}
.list {
  margin: 20rpx 0;
  position: relative;
}
.read-block {
  position: absolute;
  top: -16rpx;
  background: rgba($color: #969696, $alpha: 0.5);
  padding: 10rpx 20rpx;
  color: #1a1919;
  left: 80%;
  transform: translateX(-80%);
}
.read-block::after {
  // 倒三角形，位于底部
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10rpx solid transparent;
  border-right: 10rpx solid transparent;
  border-top: 10rpx solid rgba($color: #969696, $alpha: 0.5);
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
</style>